<template>
    <div class="champion">
        <div class="i-layout-page-header">
            <PageHeader title="英雄管理" content="管理英雄，课进行增删改查等工作" hidden-breadcrumb/>
        </div>

        <!-- 英雄列表 -->
        <Card title="英雄列表" :bordered="false" dis-hover class="ivu-mt">
            <div slot="extra">

                <!-- 功能按键 -->
                <Button type="primary" ghost style="margin-right: 200px" @click="showAddChampion">新增英雄</Button>
                <RadioGroup v-model="query.type" type="button" @on-change="typeChange">
                    <Radio label="all">全部</Radio>
                    <Radio label="fighter">战士</Radio>
                    <Radio label="mage">法师</Radio>
                    <Radio label="assassin">刺客</Radio>
                    <Radio label="tank">坦克</Radio>
                    <Radio label="marksman">射手</Radio>
                    <Radio label="support">辅助</Radio>
                    <Radio label="deleteChampion">已删除</Radio>
                </RadioGroup>
                <Input search placeholder="请输入..." v-width="200" v-model="find" class="ivu-ml"
                       @on-change="fuzzySearch"/>
            </div>

            <!-- 英雄列表卡片 -->
            <Row type="flex" justify="center" align="middle" :gutter="24" class="ivu-mt">
                <Col :xl="8" :lg="8" :md="12" :sm="24" :xs="24" class="ivu-mb" v-for="(item,index) in champions"
                     :key="index">
                    <Card shadow :padding="0" v-height="200">
                        <List item-layout="vertical" class="ivu-pl ivu-pr">
                            <ListItem>
                                <ListItemMeta :title="item.name + ' - ' + item.title">
                                    <Avatar :src="item.iconImg" slot="avatar" size="large"/>
                                    <div slot="description" class="list-card-list-desc">
                                        <Ellipsis ref="ellipsis" :text="item.blurb" :lines="4"/>
                                    </div>
                                </ListItemMeta>
                                <template slot="action">
                                    <Divider class="ivu-mb-8"/>
                                    <li v-if="item.deleteChampion == 1" v-width="'33%'" @click="showDetailDetail(item.id)">详情</li>
                                    <li v-if="item.deleteChampion == 1" v-width="'33%'" @click="showEditDetail(item.id)">编辑</li>
                                    <li v-if="item.deleteChampion == 1" v-width="'33%'" @click="deleteChampion(item.id)">删除</li>
                                    <!-- 如果英雄已被删除 显示如下按钮 -->
                                    <li v-if="item.deleteChampion == 0" v-width="'50%'" @click="showDetailDetail(item.id)">详情</li>
                                    <li v-if="item.deleteChampion == 0" v-width="'50%'" @click="regainChampion(item.id)">恢复</li>
                                </template>
                            </ListItem>
                        </List>
                    </Card>
                </Col>
            </Row>

            <!-- 分页 -->
            <div class="ivu-mt ivu-text-right">
                <Page :total="page.total"
                      :current="page.current"
                      :page-size="page.pageSize"
                      :page-size-opts="page.sizeOpts"
                      show-total
                      show-sizer
                      @on-change="pageNumChange"
                      @on-page-size-change="pageSizeChange"
                />
            </div>
        </Card>

        <!-- 英雄详情 -->
        <Modal footer-hide v-model="show.detailDialog" title="英雄详情">
            <div style="width: 100%">
                <h2 style="text-align: center;margin-bottom: 10px">{{champion.name}} - {{champion.title}} -
                    {{champion.alias}}</h2>
                <Divider dashed/>
                <div class="box">
                    <Avatar class="boxStart" shape="square" icon="ios-person" :src="champion.iconImg" size="100"/>
                    <div style="height: 100px">
                        <h2>职业：</h2>
                        <h3 v-if="champion.isFighter == 1">战士</h3>
                        <h3 v-if="champion.isMage == 1">法师</h3>
                        <h3 v-if="champion.isAssassin == 1">刺客</h3>
                        <h3 v-if="champion.isTank == 1">坦克</h3>
                        <h3 v-if="champion.isMarksman == 1">射手</h3>
                        <h3 v-if="champion.isSupport == 1">辅助</h3>
                    </div>
                    <div class="boxEnd" style="width: 40%">
                        <h2>基础信息</h2>
                        物理攻击:
                        <Progress :percent="champion.attack*10" :stroke-color="['#fcf453', '#fcc824']"
                                  :stroke-width="15" hide-info style="width: 55%"/>
                        {{champion.attack}}
                        <br>

                        魔法攻击:
                        <Progress :percent="champion.magic*10" :stroke-color="['#ffbf00', '#ff4000']"
                                  :stroke-width="15"
                                  hide-info style="width: 55%"/>
                        {{champion.magic}}
                        <br>

                        防御能力:
                        <Progress :percent="champion.defense*10" :stroke-color="['#7ac3ec', '#003293']"
                                  :stroke-width="15" hide-info style="width: 55%"/>
                        {{champion.defense}}
                        <br>

                        上手难度:
                        <Progress :percent="champion.difficulty*10" :stroke-color="['#b0d343', '#44a241']"
                                  :stroke-width="15" hide-info style="width: 55%"/>
                        {{champion.difficulty}}
                        <br>

                    </div>
                </div>
                <Divider dashed><label style="font-size: 20px">英雄介绍</label></Divider>
                <Collapse v-model="show.value1" simple>
                    <Panel name="1">
                        <label style="color: #7ac3ec">背景故事</label>
                        <p slot="content">{{champion.blurb}}</p>
                    </Panel>
                    <Panel name="2">
                        <label style="color: #44a241">当我使用</label>
                        <p slot="content" v-for="(item,index) in champion.allyTips"
                           :key="index">{{item}}</p>
                    </Panel>
                    <Panel name="3">
                        <label style="color: #ff4000">敌方使用</label>
                        <p slot="content" v-for="(item,index) in champion.enemyTips"
                           :key="index">{{item}}</p>
                    </Panel>
                </Collapse>
            </div>
            <br/>
            <br/>
        </Modal>

        <!-- 新增和编辑英雄 -->
        <Modal footer-hide v-model="show.addChampion" :title="addOrUpdate">
            <div class="addBox">
                <!-- 图片上传 -->
                <Avatar class="boxStart" shape="square" icon="ios-person" :src="champion.iconImg" size="100"/>
                <br/>
                <Upload :action="imageUrlStr" name="files" :on-success="uploadSuccess" :show-upload-list="false">
                    <Button icon="ios-cloud-upload-outline">上传图片</Button>
                </Upload>
                <br/>
                <label>英文名：&emsp;</label>
                <Input v-model="champion.alias" placeholder="请输入英雄英文名 ..." style="width: 80%"/><br/>
                <label>名称：&emsp;&emsp;</label>
                <Input v-model="champion.name" placeholder="请输入英雄名称 ..." style="width: 80%"/><br/>
                <label>名字：&emsp;&emsp;</label>
                <Input v-model="champion.title" placeholder="请输入英雄名字 ..." style="width: 80%"/><br/>
                <Divider dashed/>
                <p>英雄职业:</p>
                <div>
                    <CheckboxGroup v-model="job">
                        <Checkbox label="战士" border></Checkbox>
                        <Checkbox label="法师" border></Checkbox>
                        <Checkbox label="刺客" border></Checkbox>
                        <Checkbox label="坦克" border></Checkbox>
                        <Checkbox label="射手" border></Checkbox>
                        <Checkbox label="辅助" border></Checkbox>
                    </CheckboxGroup>
                </div>
                <Divider dashed/>
                <label>物理攻击：</label>
                <InputNumber :max="10" :min="0" :step="1" :precision="0" v-model="champion.attack"></InputNumber>
                <Progress :percent="champion.attack*10" :stroke-color="['#fcf453', '#fcc824']"
                          :stroke-width="20" hide-info style="width: 55%;margin-left: 15px"/>
                <br/>
                <label>魔法攻击：</label>
                <InputNumber :max="10" :min="0" :step="1" :precision="0" v-model="champion.magic"></InputNumber>
                <Progress :percent="champion.magic*10" :stroke-color="['#ffbf00', '#ff4000']"
                          :stroke-width="20"
                          hide-info style="width: 55%;margin-left: 15px"/>
                <br/>
                <label>防御能力：</label>
                <InputNumber :max="10" :min="0" :step="1" :precision="0" v-model="champion.defense"></InputNumber>
                <Progress :percent="champion.defense*10" :stroke-color="['#7ac3ec', '#003293']"
                          :stroke-width="20" hide-info style="width: 55%;margin-left: 15px"/>
                <br/>
                <label>上手难度：</label>
                <InputNumber :max="10" :min="0" :step="1" :precision="0" v-model="champion.difficulty"></InputNumber>
                <Progress :percent="champion.difficulty*10" :stroke-color="['#b0d343', '#44a241']"
                          :stroke-width="20" hide-info style="width: 55%;margin-left: 15px"/>
                <Divider dashed/>
                <label>背景故事：</label>
                <Input v-model="champion.blurb" type="textarea" :autosize="true"
                       placeholder="请输入背景故事 ..." style="width: 80%"/>
                <Divider dashed/>
                <div style="width: 100%;display: flex;justify-content:center;">
                    <ButtonGroup>
                        <Button @click="addSelfInput">
                            <Icon type="ios-arrow-back"></Icon>
                            点击添加我方使用技巧
                        </Button>
                        <Button @click="addEnemyInput" type="primary">
                            点击添加敌方使用技巧
                            <Icon type="ios-arrow-forward"></Icon>
                        </Button>
                    </ButtonGroup>
                </div>
                <Divider dashed/>
                <div>
                    <p>我方使用：</p>
                    <label v-for="(item,index) in champion.allyTips" :key="index">
                        <Input :value="item" type="textarea" ref="selfInput" :autosize="true"
                               placeholder="请输入我方使用技巧 ..." style="width: 100%"
                        />
                    </label>
                </div>
                <Divider dashed/>
                <div>
                    <p>敌方使用：</p>
                    <label v-for="(item,index) in champion.enemyTips" :key="index">
                        <Input :value="item" type="textarea" ref="enemyInput" :autosize="true"
                               placeholder="请输入敌方使用技巧 ..." style="width: 100%"/>
                    </label>
                </div>
            </div>
            <Divider dashed/>
            <div style="width: 100%;display: flex;justify-content: flex-end;">
                <Button v-if="champion.id != ''" @click="updateChampion" type="primary">提交</Button>
                <Button v-if="champion.id == ''" @click="addChampion" type="primary">提交</Button>
            </div>
            <br/>
            <br/>
        </Modal>


    </div>
</template>
<script>
    import {
        listChampion,
        getChampionById,
        updateChampion,
        newChampion,
        deleteChampionById,
        regainChampion,
    } from "@/api/champion";

    export default {
        name: "champion",
        data() {
            return {
                //上传图片地址
                imageUrlStr:"http://localhost:8080/uploads/champion",
                //页面刷新地址
                urlStr:"http://localhost:8081/admin/champion/index",
                // 弹出框展示
                show: {
                    value1: '1',
                    detailDialog: false,
                    addChampion: false,
                },
                // 英雄列表数据
                champions: [],
                addOrUpdate: "",
                // 复选框职业数组
                job: [],
                // 英雄属性
                champion: {
                    // ID
                    id: 0,
                    // 英文名
                    alias: "",
                    // 名称
                    name: "",
                    // 名字
                    title: "",
                    // 战士
                    isFighter: 0,
                    // 法师
                    isMage: 0,
                    // 刺客
                    isAssassin: 0,
                    // 坦克
                    isTank: 0,
                    // 射手
                    isMarksman: 0,
                    // 辅助
                    isSupport: 0,
                    // 物理攻击
                    attack: 0,
                    // 魔法攻击
                    magic: 0,
                    // 防御能力
                    defense: 0,
                    // 上手难度
                    difficulty: 0,
                    // 背景故事
                    blurb: "",
                    // 自己使用时建议
                    allyTips: [],
                    // 敌人使用时建议
                    enemyTips: [],
                    // 图标地址
                    iconImg: "",
                    // 英雄是否被删除  1 为存在 0 为删除
                    deleteChampion: 1,
                },
                // 分页展示
                page: {
                    total: 0,
                    current: 1,
                    sizeOpts: [12, 24, 36, 48],
                    pageSize: 12
                },
                //模糊查询
                find: "",
                // 分页查询
                query: {
                    pageNum: 0,
                    pageSize: 12,
                    type: 'all',
                    find: "",
                },
            }
        },
        methods: {
            // 上传图片
            uploadSuccess(response, file, fileList) {
                // console.log(response);
                // console.log(file);
                // console.log(fileList);
                // 获取返回响应数组的第一个元素
                this.champion.iconImg = response.pop();
            },

            //恢复已删除英雄
            regainChampion(id){
              if (window.confirm(`是否恢复该英雄？`)){
                  regainChampion(id);
                  // listChampion(this.query);
                  window.location.href = this.urlStr;
              }
            },

            //删除英雄
            deleteChampion(id) {
                if(window.confirm(`是否删除该英雄?`)){
                    deleteChampionById(id);
                    // listChampion(this.query);
                    window.location.href = this.urlStr;
                }
            },

            //展示修改弹出页
            showEditDetail(id) {
                if (id != "") {
                    this.addOrUpdate = "编辑英雄";
                }
                this.job = [];
                this.champion = {
                    // ID
                    id: 0,
                    // 英文名
                    alias: "",
                    // 名称
                    name: "",
                    // 名字
                    title: "",
                    // 战士
                    isFighter: 0,
                    // 法师
                    isMage: 0,
                    // 刺客
                    isAssassin: 0,
                    // 坦克
                    isTank: 0,
                    // 射手
                    isMarksman: 0,
                    // 辅助
                    isSupport: 0,
                    // 物理攻击
                    attack: 0,
                    // 魔法攻击
                    magic: 0,
                    // 防御能力
                    defense: 0,
                    // 上手难度
                    difficulty: 0,
                    // 背景故事
                    blurb: "",
                    // 自己使用时建议
                    allyTips: [],
                    // 敌人使用时建议
                    enemyTips: [],
                    // 图标地址
                    iconImg: "",
                    // 英雄是否被删除  1 为存在 0 为删除
                    deleteChampion: 1,
                };
                getChampionById(id).then(res => {
                    this.champion = res;
                    if (this.champion.isFighter == 1){
                        this.job.push("战士")
                    };
                    if (this.champion.isMage == 1) {
                        this.job.push("法师")
                    };
                    if (this.champion.isAssassin == 1) {
                        this.job.push("刺客")
                    };
                    if (this.champion.isTank == 1) {
                        this.job.push("坦克")
                    };
                    if (this.champion.isMarksman == 1) {
                        this.job.push("射手")
                    };
                    if (this.champion.isSupport == 1) {
                        this.job.push("辅助")
                    };
                })
                this.show.addChampion = true;
            },
            //修改英雄
            updateChampion () {
                if (this.job.indexOf("战士") != -1) {
                    this.champion.isFighter = 1;
                }else {
                    this.champion.isFighter = 0;
                }
                if (this.job.indexOf("法师") != -1) {
                    this.champion.isMage = 1;
                }else {
                    this.champion.isMage  = 0 ;
                }
                if (this.job.indexOf("刺客") != -1) {
                    this.champion.isAssassin = 1;
                }else {
                    this.champion.isAssassin  = 0 ;
                }
                if (this.job.indexOf("坦克") != -1) {
                    this.champion.isTank = 1;
                }else {
                    this.champion.isTank  = 0 ;
                }
                if (this.job.indexOf("射手") != -1) {
                    this.champion.isMarksman = 1;
                }else {
                    this.champion.isMarksman  = 0 ;
                }
                if (this.job.indexOf("辅助") != -1) {
                    this.champion.isSupport = 1;
                }else {
                    this.champion.isSupport  = 0 ;
                }
                var a = this.$refs.selfInput;
                var b = this.$refs.enemyInput;
                for (var i=0 ; i<a.length;i++){
                    this.champion.allyTips.splice(i,1,a[i].currentValue);
                }
                for (var i=0 ; i<b.length;i++){
                    this.champion.enemyTips.splice(i,1,b[i].currentValue);
                }
                if(window.confirm("是否确定提交修改！")){
                    updateChampion(this.champion);
                    this.show.addChampion = false;
                }
            },

            //展示新增英雄弹出页
            showAddChampion() {
                this.addOrUpdate = "新增英雄";
                //新增时初始化
                this.job = [];
                this.champion = {
                    // ID
                    id: 0,
                    // 英文名
                    alias: "",
                    // 名称
                    name: "",
                    // 名字
                    title: "",
                    // 战士
                    isFighter: 0,
                    // 法师
                    isMage: 0,
                    // 刺客
                    isAssassin: 0,
                    // 坦克
                    isTank: 0,
                    // 射手
                    isMarksman: 0,
                    // 辅助
                    isSupport: 0,
                    // 物理攻击
                    attack: 0,
                    // 魔法攻击
                    magic: 0,
                    // 防御能力
                    defense: 0,
                    // 上手难度
                    difficulty: 0,
                    // 背景故事
                    blurb: "",
                    // 自己使用时建议
                    allyTips: [],
                    // 敌人使用时建议
                    enemyTips: [],
                    // 图标地址
                    iconImg: "",
                    // 英雄是否被删除  1 为存在 0 为删除
                    deleteChampion: 1,
                };
                this.show.addChampion = true;
            },
            //添加英雄
            addChampion() {
                if (this.job.indexOf("战士") != -1) {
                    this.champion.isFighter = 1;
                }else {
                    this.champion.isFighter = 0;
                }
                if (this.job.indexOf("法师") != -1) {
                    this.champion.isMage = 1;
                }else {
                    this.champion.isMage  = 0 ;
                }
                if (this.job.indexOf("刺客") != -1) {
                    this.champion.isAssassin = 1;
                }else {
                    this.champion.isAssassin  = 0 ;
                }
                if (this.job.indexOf("坦克") != -1) {
                    this.champion.isTank = 1;
                }else {
                    this.champion.isTank  = 0 ;
                }
                if (this.job.indexOf("射手") != -1) {
                    this.champion.isMarksman = 1;
                }else {
                    this.champion.isMarksman  = 0 ;
                }
                if (this.job.indexOf("辅助") != -1) {
                    this.champion.isSupport = 1;
                }else {
                    this.champion.isSupport  = 0 ;
                }
                var a = this.$refs.selfInput;
                var b = this.$refs.enemyInput;
                for (var i=0 ; i<a.length;i++){
                    this.champion.allyTips.splice(i,1,a[i].currentValue);
                }
                for (var i=0 ; i<b.length;i++){
                    this.champion.enemyTips.splice(i,1,b[i].currentValue);
                }
                if(window.confirm("是否确定提交新增！")){
                    newChampion(this.champion);
                    this.show.addChampion = false;
                    window.location.href = this.urlStr;
                }
            },

            //添加我方使用技巧输入框
            addSelfInput() {
                this.champion.allyTips.splice(this.champion.allyTips.length + 1, 0, "");
            },
            //添加敌方使用技巧输入框
            addEnemyInput() {
                this.champion.enemyTips.splice(this.champion.enemyTips.length + 1, 0, "");
            },

            //展示详情弹出页
            showDetailDetail(id) {
                this.show.value1 = '1';
                this.show.detailDialog = true;
                getChampionById(id).then(res => {
                    this.champion = res;
                })
            },


            //按照职业分类查询
            typeChange(type) {
                this.query.type = type;
                // 重置分页信息
                this.query.pageNum = 0
                // 获取新的数据
                this.listChampion()
            },
            //查询第几页内容
            pageNumChange(num) {
                this.query.pageNum = num
                // 重新获取数据
                this.listChampion();
            },
            //改变每页显示多少条数据
            pageSizeChange(size) {
                this.query.pageSize = size
                this.page.pageSize = size
                this.listChampion()
            },
            //查询英雄
            listChampion() {
                listChampion(this.query).then(res => {
                    this.champions = res.list;
                    this.page.total = res.total;
                    this.page.current = res.pageNum;
                })
            },
            //模糊查询
            fuzzySearch() {
                this.query.find = this.find;
                this.query.type = "all";
                this.listChampion()
            },
        }
        ,
        mounted() {
            this.listChampion()
        }
    }
</script>
<style lang="less">
    //新增 修改 页
    .demo-split {
        height: 200px;
        border: 1px solid #dcdee2;
    }

    .demo-split-pane {
        padding: 10px;
    }

    //详情页
    .box {
        display: flex;
        width: 100%;
        height: 180px;
        align-items: center;
        justify-content: space-around;
    }

    .boxStart {
        align-self: flex-start;
    }

    .boxEnd {
        align-self: flex-end;
    }

    .list-card-list {
        &-desc {
            height: 85px;
            overflow: hidden;
        }
    }

    // 图片上传
    .demo-upload-list {
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        margin-right: 4px;
    }

    .demo-upload-list img {
        width: 100%;
        height: 100%;
    }

    .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);
    }

    .demo-upload-list:hover .demo-upload-list-cover {
        display: block;
    }

    .demo-upload-list-cover i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
